/**
 * Holly web's MUI theme
 * @module styles/theme
 */

// import from package
import { createTheme, alpha, getContrastRatio } from "@mui/material/styles";

/*
 * This defines lily theme
 */

// Define palette used by system
export const systemPalette = {
  black: "#000000",
  gold: "#ffd700",
  red: "#ff0000",
  blue: "#3944bc",
  royalblue: "#4169e1",
  chocolate: "#7b3f00",
  darkblue: "#00008b",
  pureblue: "#0000ff",
  navy: "#0a1172",
  cobalt: "#1338be",
  azure: "#1520a6",
  cerulean: "#0492c2",
  arctic: "#82eefd",
  darkred: "#8b0000",
  darkpurple: "#221c35",
  darkbrown: "#4e3524",
  darkgreen: "#006b00",
  darkmagenta: "#8b008b",
  darkchocolate: "#352620",
  lightyellow: "#ffff99",
  lightblue: "#add8e6",
  neonlightblue: "#83eeff",
  lightgreen: "#90ee90",
  green: "#00ff00",
  yellow: "#ffcc00",
  orange: "#ff8c00",
  brown: "#964b00",
  purple: "#8c00bf",
  pink: "#ff66cc",
  magenta: "#ff00ff",
  goldenrod: "#daa520",
  emerald: "#50c878",
  grey: "#cccccc",
};

/**
 * @param {number} select index of selected primary color
 * @param {bool} dark whether to use darkmode
 * @returns {object} MUI's theme object
 */
export function lilyTheme(dark = false) {
  // 根据dark参数选择相应的调色板
  const primaryMainColor = dark ? "#F5F5F5" : "rgb(152, 178, 221)"; // 根据明暗模式选择颜色
  const secondaryMainColor = "#4169e1"; // 假设 secondary 颜色不变

  /* ---------------------------------------------------------------------
   *                             定义 lily 色调
   * --------------------------------------------------------------------- */
  let theme = createTheme({
    palette: {
      primary: {
        main: primaryMainColor, // 示例：使用蓝色作为主要颜色
      },
      secondary: {
        main: secondaryMainColor,
      },
      text: {
        main: dark ? "#fff" : systemPalette.black,
      },
      error: {
        main: "#ff0000",
      },
      popperBackground: {
        main: dark ? "rgb(15, 23, 42)" : "#ffffff",
        secondary: dark ? "#313131" : "rgb(216, 218, 220)",
      },
      mode: dark ? "dark" : "light",
      barBackground: {
        main: dark ? "rgb(5, 9, 35)" : "#F5F5F5",
      },
      background: {
        main: dark ? "rgb(15, 23, 42)" : "#f6f8fa",
      },
      scrollTrackColor: {
        main: dark ? "rgb(30, 41, 59)" : "rgb(241, 245, 249)",
      },
      scrollThumbColor: {
        main: dark ? "rgb(51, 65, 85)" : "rgb(203, 213, 225)",
      },
      subMenu: {
        main: dark ? "#1c1f37" : "#f5f5f5",
        border: dark ? "#37393e" : "#e8e8e8",
      },
    },
    space: {
      infoEditWidth: "850px",
      logButtonSize: "25px",
      barHeight: `50px`,
      minTitleWidth: 120,
      drawerWidth: 250,
      minDrawerWidth: "120px",
      navListWidth: "215px",
      navListHeight: "36px",
      minNavListWidth: "100px",
      searchBoxHeight: "40px",
      searchBoxWidth: "400px",
      portraitHeight: 176,
      portraitWidth: 117,
      avatarWidth: 80,
      peopleInfoPortraitHeight: 35,
      mainMinWidth: 300,
      cardWidth: 250,
      cardHeight: 150,
      // paletteSize: palette.length,
    },
    typography: {
      fontFamily: ["simsun", "fangsong", "roboto", "serif", "times"].join(","),
    },
  });

  // Contrast and hover colors
  theme = createTheme(theme, {
    palette: {
      primaryContrast: {
        main: theme.palette.getContrastText(theme.palette.primary.main),
      },
      hover: {
        main:
          getContrastRatio(theme.palette.primary.main, systemPalette.gold) >
            4.5 ||
          getContrastRatio(theme.palette.primary.main, systemPalette.gold) >=
            getContrastRatio(theme.palette.primary.main, systemPalette.blue)
            ? systemPalette.gold
            : systemPalette.blue,
        secondary:
          getContrastRatio(
            theme.palette.barBackground.main,
            systemPalette.gold
          ) > 4.5 ||
          getContrastRatio(
            theme.palette.barBackground.main,
            systemPalette.gold
          ) >=
            getContrastRatio(
              theme.palette.barBackground.main,
              systemPalette.blue
            )
            ? systemPalette.gold
            : systemPalette.blue,
        third:
          getContrastRatio(theme.palette.background.main, systemPalette.gold) >
            4.5 ||
          getContrastRatio(theme.palette.background.main, systemPalette.gold) >=
            getContrastRatio(theme.palette.background.main, systemPalette.blue)
            ? systemPalette.gold
            : systemPalette.blue,
      },
      tableBorder: {
        main: theme.palette.mode === "dark" ? "#5a5a5a" : "#F5F5F5",
      },
    },
    space: {
      insigniaHeight: `calc(${theme.space.barHeight}*.9)`,
    },
  });

  /* ---------------------------------------------------------------------
   *                               定义文本样式
   * --------------------------------------------------------------------- */
  // Other typography definitions
  theme = createTheme(theme, {
    typography: {
      h2: {
        fontSize: 20,
        fontWeight: 600,
        color: theme.palette.text.main,
        //paddingLeft: "10px",
        marginTop: "10px",
        //marginBottom: "10px",
        textAlign: "center",
      },
      h3: {
        fontFamily: ["fangsong", "simsun", "roboto", "serif", "times"].join(
          ","
        ),
        fontSize: 18,
        fontWeight: 600,
        color: theme.palette.text.main,
        align: "center",
        padding: 0,
        borderBottom: `1px solid ${theme.palette.primary.main}`,
        width: "200px",
        margin: theme.spacing(2, 0, 2, 0),
      },
      h4: {
        fontSize: 23,
        fontWeight: 600,
        color: theme.palette.primaryContrast.main,
        "&:hover": {
          color: theme.palette.hover.main,
        },
      },
      h5: {
        fontSize: 16,
        fontWeight: 600,
        margin: theme.spacing(2, 0, 2, 0),
        color: theme.palette.text.main,
      },
      h6: {
        fontFamily: ["fangsong", "simsun", "roboto", "serif", "times"].join(
          ","
        ),
        fontSize: 16,
        fontWeight: 600,
        color: theme.palette.text.main,
      },
      body1: {
        fontSize: 16,
        fontWeight: 200,
        p: 0,
        m: 0,
      },
      body2: {
        fontFamily: ["simsun", "fangsong", "roboto", "serif", "times"].join(
          ","
        ),
        fontSize: 15,
        fontWeight: 300,
        p: 0,
        m: 0,
      },
    },
  });

  theme = createTheme(theme, {
    typography: {
      body3: {
        fontFamily: [
          "simsun",
          "roboto",
          "arial",
          "serif",
          "fangsong",
          "times",
        ].join(","),
        fontSize: 13,
        fontWeight: 200,
        margin: 0,
        p: 0,
      },
      body4: {
        fontFamily: [
          "simsun",
          "arial",
          "roboto",
          "serif",
          "fangsong",
          "times",
        ].join(","),
        fontSize: 12,
        fontWeight: 200,
        padding: 0,
        margin: 0,
      },
    },
  });

  theme = createTheme(theme, {
    typography: {
      error: {
        fontFamily: ["roboto", "simsun", "arial", "serif", "times"].join(","),
        fontSize: 22,
        fontWeight: 400,
        color: theme.palette.error.main,
      },
    },
  });

  theme = createTheme(theme, {
    typography: {
      foot: {
        fontFamily: [
          "roboto",
          "fangsong",
          "simsun",
          "arial",
          "serif",
          "times",
        ].join(","),
        fontSize: 12,
        fontWeight: 200,
        color: alpha(theme.palette.text.main, 0.4),
      },
    },
  });

  return theme;
}
